<!-- 替换 -->
<div class="modal fade" id="create-replace-modal">
    <div class="modal-dialog" role="document" style="width:1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <span style="font-size: 20px;"><span id="referralname">替换</span></span>
            </div>
            <div class="modal-body">
                <form class="form replace-modelform">
                    <div class="form-group">
                        <label class="control-label">替换前</label>
                        <div class="nameList last">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                            <input type="text" class="form-control" name="search" autocomplete="false" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" style="display:flex;">
                            替换后
                            <i class="iconfont icon-tianjia2" st></i>
                        </label>
                        <div class="next">
                            <div class="nameList" id="nameList">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                                <input type="text" class="form-control" name="replace" autocomplete="false" value="">
                            </div>
    
                        </div>
                    </div>
                    <input type="hidden" name="id" id="id" value="">
                    <input type="hidden" name="file_path" id="file_path" value="">
                    <input type="hidden" name="name" id="name" value="">
                    <input type="hidden" name="book_id" id="book_id" value="">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="create-replace" onclick="ajaxAdd('create-replace','.replace-modelform')" class="btn btn-primary ">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 文本添加 -->
<div class="modal fade" id="create-text-modal">
    <div class="modal-dialog" role="document" style="width:1200px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <span style="font-size: 20px;"><span id="referralname">添加</span></span>
            </div>
            <div class="modal-body">
                <div data-bind="visible: loading" class="loading-panel" style="display: none;">
                    <i class="fa fa-spin fa-spinner"></i>
                </div>
                <form class="form-horizontal TextModelForm">
                    <div class="form-group">
                        <label class="control-label col-sm-1"><span class="required">*</span>上传标本</label>
                        <div class="col-lg-11" style="padding:0">
                            <div>
                                <div id="picker_text" >
                                    上传文件
                                </div>
                                <span>(请上传.txt文件)</span>
                            </div>
                            <div id="fileList_ebook" class="upload-file-list-info"></div>
                        </div>
                        <input type="hidden" id="file_path1" name="file_path" class="file_path">
                        <input type="hidden" id="textfile_name" name="name">
                        <input type="hidden" id="book_id" name="book_id" class="book_id">
                    </div>
                    <div class="form-group" style="margin-bottom: 0;">
                        <label class="control-label col-sm-1">名字</label>
                        <div class="col-lg-11 nameList last" style="padding:0">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                            <input type="text" class="form-control" name="role_name" autocomplete="false" value="">
                        </div>
                        
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="createreTextAdd" onclick="ajaxAdd('createreTextAdd','.TextModelForm')" class="btn btn-primary ">提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(".icon-tianjia2").click(function () {
        $('#nameList').clone(true).appendTo(".next");
    })
    $('.replace').on('click', function () {
        let self = this;
        var $modal = $('#create-replace-modal');
        $modal.on('show.bs.modal', function () {
            var keys = Object.keys($(self).data());
            $('.replace-modelform input[name=search]').each((index, item) => {
                $(item).val($(self).data('role_name').toString().split(',')[index])
            })
            for (var i = 0; i < keys.length; i++) {
                $(`.replace-modelform #${keys[i]}`).val($(self).data(keys[i]))
            }
        });
        $modal.modal({
            backdrop: 'static',
            keyboard: false
        });
        $modal.on('hide.bs.modal', function () {
            window.location.reload();
        })
    });

    function ajaxAdd(id, form) {
        var url;
        if (id == 'createreTextAdd') {
            var data = $(form).serializeJson();
            url = "{:url('book/addTxtLog')}"
            if (data.book_id == '') {
                layer.msg("请选择书名");
                return;
            }
            if (data.file_path == '') {
                layer.msg("请选择文件");
                return;
            }
            if (data.role_name.length != 0) {
                data.role_name = data.role_name.filter(s => $.trim(s).length > 0).toString();
            }

        }
        if (id == 'create-replace') {
            var data = $(form).serializeArrays();
            url = "{:url('replaceversion/replace')}";
            let newSearch = data.search.filter(s => $.trim(s).length > 0)
            let newReplace = data.replace.filter(s => $.trim(s).length > 0)
            let replace = [];
            if (data.file_path.toString() === '') {
                layer.msg("请上传文件");
                return;
            }
            if (newSearch.length === 0) {
                layer.msg("请填写替换前名字");
                return;
            }
            if (newReplace.length == 0) {
                layer.msg("请填写替换后名字");
                return;
            }
            for (let i = 0; i < data.replace.length; i += 12) {
                let arr = data.replace.slice(i, i + 12);
                for (let index = 0; index < arr.length; index++) {
                    const element = arr[index];
                    if (data.search[index] !== '' && element !== '' || data.search[index] === '' && element === '') { } else {
                        layer.msg("填写格式错误");
                        return;
                    }
                }
                replace.push(arr.filter(s => $.trim(s).length > 0).toString())
            }
            data.file_path = data.file_path.toString()
            data.id = data.id.toString()
            data.book_id = data.book_id.toString()
            data.name = data.name.toString()
            data.replace = replace;
            data.search = newSearch.toString();
        }
        $.ajax({
            type: "POST",
            url,
            data,
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    updateAlert(data.msg, 'success');
                    setTimeout(function () {
                        window.location.reload();
                    }, 100);
                } else {
                    updateAlert("添加，" + data.msg, 'danger');
                }
            },
        })
    }

    // 文本 查看
    $('.textTable .look').click(function () {
        goUrl({
            txt_id: $(this).data('id'),
            dirPage: 1,
            directory_id: 0
        })
    })
    // 文本 简介修改
    $('.textTable .brief textarea').blur(function () {
        let data = {
            synopsis: $(this).val(),
            id: $(this).data('id')
        }
        $.ajax({
            type: "POST",
            url: "{:url('book/editSynopsis')}",
            data,
            dataType: "json",
            success: function (data) {
                if (data.code != 1) {
                    updateAlert("修改" + data.msg, 'danger');
                }
            },
        })
    })

    // 文本 目录查看内容
    $('.textTable .content').click(function () {
        goUrl({
            directory_id: $(this).data('id'),
        })
    })
    // 文本 分页
    layui.use(['laypage', 'layer'], function () {
        var laypage = layui.laypage,
            layer = layui.layer;
        // 书籍分页
        laypage.render({
            elem: 'txtPage',
            count: '{$txtPage.txtTotal}',
            theme: '#1E9FFF',
            limit: '{$txtPage.txtLimit}',
            curr: '{$txtPage.txtPage}',
            jump: function (obj, first) {
                if (!first) {
                    goUrl({
                        txtPage: obj.curr,
                        directory_id:0,
                        txt_id:0,
                        dirPage:1
                    })
                }
            }
        });
        // 文本 目录 
        laypage.render({
            elem: 'dirPage',
            count: '{$dirPage.dirTotal}',
            theme: '#1E9FFF',
            limit: '{$dirPage.limit}',
            curr: '{$dirPage.dirPage}',
            jump: function (obj, first) {
                if (!first) {
                    goUrl({
                        dirPage: obj.curr,
                        directory_id:0
                    })
                }
            }
        });
    })

    function goUrl(params) {
        function objectToQuery() {
            let obj = arguments[0];
            let prefix = arguments[1];
            if (typeof obj !== "object") return "";
            const attrs = Object.keys(obj);
            return attrs.reduce((query, attr, index) => {
                // 判断是否是第一层第一个循环
                if (index === 0 && !prefix) query += "?";
                if (typeof obj[attr] === "object") {
                    const subPrefix = prefix ? `${prefix}[${attr}]` : attr;
                    query += this.objectToQuery(obj[attr], subPrefix);
                } else {
                    if (prefix) {
                        query += `${prefix}[${attr}]=${obj[attr]}`;
                    } else {
                        query += `${attr}=${obj[attr]}`;
                    }
                }
                // 判断是否是第一层最后一个循环
                if (index !== attrs.length - 1) query += "&";
                return query;
            }, "");
        }
        let {
            txt_id = '{$txt_id}', //书本id
            book_id = '{$book_id}', //书名id
            directory_id = '{$directory_id}', //章节id
            dirPage = '{$dirPage.dirPage}', //章节分页页码
            txtPage = '{$txtPage.txtPage}', //书本分页页码
        } = params
        window.location.href = objectToQuery({
            txt_id,
            book_id,
            directory_id,
            dirPage,
            txtPage
        })
    }
</script>